<template>
  <div class="testScene-testRelateDescript">
    <el-form :model="ruleForm" :inline="true" ref="formRef" label-width="130px">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item
            label="捕捉灵敏度/发现距离"
            prop="detectionRange"
            label-width="140px"
            :rules="{
              required: true,
              message: '请输入',
              trigger: 'blur',
            }"
          >
            <el-input
              v-model="ruleForm.detectionRange"
              placeholder="请输入"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="角度跟踪范围及精度"
            prop="angleTrackingRange"
            :rules="{
              required: true,
              message: '请输入',
              trigger: 'blur',
            }"
          >
            <el-input
              v-model="ruleForm.angleTrackingRange"
              placeholder="请输入"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item
            label="速度跟踪范围及精度"
            prop="speedTrackingRange"
            :rules="{
              required: true,
              message: '请输入',
              trigger: 'blur',
            }"
          >
            <el-input
              v-model="ruleForm.speedTrackingRange"
              placeholder="请输入"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="距离搜索范围"
            prop="searchRange"
            :rules="{
              required: true,
              message: '请输入',
              trigger: 'blur',
            }"
          >
            <el-input
              v-model="ruleForm.searchRange"
              placeholder="请输入"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item
            label="距离跟踪范围及精度"
            prop="distanceTrackingRange"
            :rules="{
              required: true,
              message: '请输入',
              trigger: 'blur',
            }"
          >
            <el-input
              v-model="ruleForm.distanceTrackingRange"
              placeholder="请输入"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="抗干压制/欺骗扰成功率"
            prop="deceptionRate"
            :rules="{
              required: true,
              message: '请输入',
              trigger: 'blur',
            }"
          >
            <el-input
              v-model="ruleForm.deceptionRate"
              placeholder="请输入"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item
            label="脱靶量/命中率"
            prop="missedHitRate"
            :rules="{
              required: true,
              message: '请输入',
              trigger: 'blur',
            }"
          >
            <el-input
              v-model="ruleForm.missedHitRate"
              placeholder="请输入"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="试验方式"
            prop="testingMethod"
            :rules="{
              required: true,
              message: '请输入',
              trigger: 'change',
            }"
          >
            <el-select
              v-model="ruleForm.testingMethod"
              clearable
              placeholder="请选择"
              :disabled="disabled"
            >
              <el-option label="全数字仿真" value="全数字仿真" />
              <el-option label="半实物仿真" value="半实物仿真" />
              <el-option label="定点（跟飞)" value="定点（跟飞)" />
              <el-option label="挂飞" value="挂飞" />
              <el-option label="实弹" value="实弹" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="17">
          <el-form-item label="试验数据处理方法" prop="dataProcessMethod">
            <el-input
              v-model="ruleForm.dataProcessMethod"
              type="textarea"
              :rows="5"
              placeholder="请输入"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="17">
          <el-form-item label="试验数据记录方法" prop="dataRecordMethod">
            <el-input
              v-model="ruleForm.dataRecordMethod"
              type="textarea"
              :rows="5"
              placeholder="请输入"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="17">
          <el-form-item label="试验结果" prop="testingResult">
            <el-input
              v-model="ruleForm.testingResult"
              type="textarea"
              :rows="5"
              placeholder="请输入"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="form-footer common-buttons" v-if="!disabled">
        <el-button type="primary" @click="onSubmit(formRef, 'form')"
          >保存</el-button
        >
        <el-button type="primary" @click="onReset(formRef)">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { httpSaveTestSceneTestExplainDescript } from "@/api/testSampleData";
import { useRoute, useRouter } from "vue-router";
import { el } from "element-plus/es/locale";
const route = useRoute();

const isLook = route.query.layerType === "look" ? true : false;
const disabled = ref<boolean>(isLook);

const props = defineProps({
  dataSourceObject: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const formRef = ref<FormInstance>();
const valiadteState2 = ref(false);
const ruleForm = ref({
  // 对抗案例想定总体描述项 testDescriptionInfoVO
  detectionRange: "",
  angleTrackingRange: "",
  speedTrackingRange: "",
  searchRange: "",
  distanceTrackingRange: "",
  deceptionRate: "",
  missedHitRate: "",
  deceptionSuccessRate: "",
  testingMethod: "",
  dataRecordMethod: "",
  testingResult: "",
});

watch(
  () => props.dataSourceObject,
  (newValue, oldValue) => {
    const { testDescriptionInfoVO } = newValue.staticPara;
    if (!testDescriptionInfoVO) {
      ruleForm.value = { ...ruleForm.value };
    } else {
      ruleForm.value = testDescriptionInfoVO;
    }
  }
);

// 保存
const onSubmit = async (
  formEl: FormInstance | undefined,
  submitType: string
) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      valiadteState2.value = false;
      const params = {
        ...ruleForm.value,
        sampleId: route.query.sampleId,
      };
      httpSaveTestSceneTestExplainDescript(params).then((res: any) => {
        const { code, message } = res;
        if (code === 200) {
          // 当submitType为form，表单提交
          if (submitType === "form") {
            ElMessage({
              message: message || "保存成功",
              type: "success",
            });
          }
        }
      });
    } else {
      valiadteState2.value = true;
      console.log("error submit!", fields);
    }
  });
};

const onReset = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

defineExpose({ onSubmit, formRef, valiadteState2 });
</script>

<style lang="scss" scoped>
.testScene-testRelateDescript {
  height: calc(100vh - 290px);
  padding: 20px;
  // width: 100%;
  overflow-y: scroll;
  .el-form--inline .el-form-item {
    width: 100%;
  }
  .el-select--small {
    width: 100%;
  }
  .el-row {
    margin-right: 0 !important;
  }
  .form-footer {
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }
}
</style>
